{% include 'navbar.html' %}
<html lang="en">
{% block navbar %}
{% endblock %}
<head>
    <style>
        body {
            font-family: "Segoe UI";
            background: rgb(237, 238, 239);
        {#background: linear-gradient(0deg, rgba(44, 255, 210, 0.92) 0%, rgba(69, 165, 195, 0.92) 55%) no-repeat fixed;#}
        }

        .register_form {
            border-radius: 25pt;
            background-color: rgba(255, 255, 255, 0.6);
            padding: 15pt 15pt 20pt;

        }

        .col-md-7 {
            margin-right: auto;
            margin-left: auto;
            padding: 15pt 15pt 20pt;
        }

    </style>
    <title>Sign</title>
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <div id="to_left">
            <h1 class="mt-2" style="color: rgb(54,151,212)">Register to our system</h1>
            <hr class="mt-0 mb-4">

        </div>
    </div>
</div>
<div class="col-md-7">
    <form class="register_form">
        {% csrf_token %}
        <div class="form-group">
            <label for="username">Username*</label>
            <input type="username" class="form-control" id="username" aria-describedby="emailHelp"
                   placeholder="Enter username" name="username">
            {% if error_username %}
                <p class="text-danger">{{ error_username }}</p>
            {% endif %}
            <small id="usernameHelp" style="color: black" class="form-text">Username can not be shorter than 5
                characters</small>
        </div>
        <div class="form-group">
            <label for="email">Email address*</label>
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp"
                   placeholder="Enter email" name="email">
            <small id="emailHelp" style="color: black" class="form-text">We'll never share your email with anyone
                else.</small>
        </div>
        <div class="form-row">
            <div class="col-md-6">
                <label for="name">Your name</label>
                <input type="text" class="form-control" id="name" aria-describedby="nameHelp"
                       placeholder="Enter name" name="name">
            </div>
            <div class="col-md-6">
                <label for="surname">Your surname*</label>
                <input type="text" class="form-control" id="surname" aria-describedby="nameHelp"
                       placeholder="Enter surname" name="surname">
            </div>
        </div>
        <div class="form-group">
            <label for="password">Password*</label>
            <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
            {% if msg %}
                <p class="text-danger">{{ msg }}</p>
            {% endif %}
        </div>
        <div class="form-group">
            <label for="password2">Confirm password*</label>
            <input type="password" class="form-control" id="password2" aria-describedby="emailHelp"
                   placeholder="Confirm password" name="password2">
            <small id="passwordHelp" style="color: black" class="form-text">Password can not be shorter than 8
                characters</small>
            <a href="/account/login">To log in click here</a>
        </div>

        <button type="submit" class="btn btn-light" formmethod="post" formaction="#">Register</button>
    </form>
</div>
</body>


</html>